<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>OpenLayers Styles Unique Value Styles Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, layer;

        function init(){
            map = new OpenLayers.Map('map', {maxResolution:'auto'});
            var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
            map.addLayer(wms);
            map.setCenter(new OpenLayers.LonLat(0, 0), 0);
            
            // create 20 random features with a random type attribute. The
            // type attribute is a value between 0 and 2.
            var features = new Array(20);
            for (var i=0; i<20; i++) {
                features[i] = new OpenLayers.Feature.Vector(
                    new OpenLayers.Geometry.Point(Math.random()*360-180, Math.random()*180-90),
                    {type: parseInt(Math.random()*3)}
                );
            }
            
            // create a styleMap with a custom default symbolizer
            var styleMap = new OpenLayers.StyleMap({
                fillOpacity: 1,
                pointRadius: 10
            });
            
            // create a lookup table with different symbolizers for 0, 1 and 2
            var lookup = {
                0: {externalGraphic: "../img/marker-blue.png"},
                1: {externalGraphic: "../img/marker-green.png"},
                2: {externalGraphic: "../img/marker-gold.png"}
            };
            
            // add rules from the above lookup table, with the keyes mapped to
            // the "type" property of the features, for the "default" intent
            styleMap.addUniqueValueRules("default", "type", lookup);
            
            layer = new OpenLayers.Layer.Vector('Points', {
                styleMap: styleMap
            });
            
            layer.addFeatures(features);
            map.addLayer(layer);
            
            // create 20 random features with a random state property.
            var features = new Array(20);
            var states = [
                OpenLayers.State.UNKNOWN,
                OpenLayers.State.UPDATE,
                OpenLayers.State.DELETE,
                OpenLayers.State.INSERT
            ];
            for (var i=0; i<20; i++) {
                features[i] = new OpenLayers.Feature.Vector(
                    new OpenLayers.Geometry.Point(Math.random()*360-180, Math.random()*180-90)
                );
                features[i].state = states[parseInt(Math.random()*4)];
            }
            
            var context = function(feature) {
                return feature;
            };
            var styleMap = new OpenLayers.StyleMap();
            
            // create a lookup table with different symbolizers for the different
            // state values
            var lookup = {};
            lookup[OpenLayers.State.UNKNOWN] = {fillColor: "green"};
            lookup[OpenLayers.State.UPDATE] = {fillColor: "green"};
            lookup[OpenLayers.State.DELETE] = {fillColor: "red"};
            lookup[OpenLayers.State.INSERT] = {fillColor: "orange"};

            styleMap.addUniqueValueRules("default", "state", lookup, context);
            layer = new OpenLayers.Layer.Vector('Points', {
                styleMap: styleMap
            });
            
            layer.addFeatures(features);
            map.addLayer(layer);
        }
    </script>
  </head>
  <body onload="init()">
    <h1 id="title">Unique Value Styles Example</h1>

    <div id="tags">
        vector, feature, stylemap, uniquevalue, cleanup, light
    </div>

    <p id="shortdesc">
        Shows how to create a style based on unique feature attribute values (markers)
        and feature state values (circles).
    </p>

    <div id="map" class="smallmap"></div>

    <div id="docs"></div>
  </body>
</html>
